<template>
  <section id="emojiNew">
      <ul class="emoji_body">
      <li v-for="(item, index) in emojiArr" :key="index">
        <img :src="item" :alt="index" :class="{emojiDoc:true,active:index>110}"  @click="imgSrc('ee_'+(index+1))">
      </li>
    </ul>
  </section>
</template>
<script>
import png1 from "assets/static/emoji/ee_1.png";
import png2 from "assets/static/emoji/ee_2.png";
import png3 from "assets/static/emoji/ee_3.png";
import png4 from "assets/static/emoji/ee_4.png";
import png5 from "assets/static/emoji/ee_5.png";
import png6 from "assets/static/emoji/ee_6.png";
import png7 from "assets/static/emoji/ee_7.png";
import png8 from "assets/static/emoji/ee_8.png";
import png9 from "assets/static/emoji/ee_9.png";
import png10 from "assets/static/emoji/ee_10.png";
import png11 from "assets/static/emoji/ee_11.png";
import png12 from "assets/static/emoji/ee_12.png";
import png13 from "assets/static/emoji/ee_13.png";
import png14 from "assets/static/emoji/ee_14.png";
import png15 from "assets/static/emoji/ee_15.png";
import png16 from "assets/static/emoji/ee_16.png";
import png17 from "assets/static/emoji/ee_17.png";
import png18 from "assets/static/emoji/ee_18.png";
import png19 from "assets/static/emoji/ee_19.png";
import png20 from "assets/static/emoji/ee_20.png";
import png21 from "assets/static/emoji/ee_21.png";
import png22 from "assets/static/emoji/ee_22.png";
import png23 from "assets/static/emoji/ee_23.png";
import png24 from "assets/static/emoji/ee_24.png";
import png25 from "assets/static/emoji/ee_25.png";
import png26 from "assets/static/emoji/ee_26.png";
import png27 from "assets/static/emoji/ee_27.png";
import png28 from "assets/static/emoji/ee_28.png";
import png29 from "assets/static/emoji/ee_29.png";
import png30 from "assets/static/emoji/ee_30.png";
import png31 from "assets/static/emoji/ee_31.png";
import png32 from "assets/static/emoji/ee_32.png";
import png33 from "assets/static/emoji/ee_33.png";
import png34 from "assets/static/emoji/ee_34.png";
import png35 from "assets/static/emoji/ee_35.png";
import png36 from "assets/static/emoji/ee_36.png";
import png37 from "assets/static/emoji/ee_37.png";
import png38 from "assets/static/emoji/ee_38.png";
import png39 from "assets/static/emoji/ee_39.png";
import png40 from "assets/static/emoji/ee_40.png";
import png41 from "assets/static/emoji/ee_41.png";
import png42 from "assets/static/emoji/ee_42.png";
import png43 from "assets/static/emoji/ee_43.png";
import png44 from "assets/static/emoji/ee_44.png";
import png45 from "assets/static/emoji/ee_45.png";
import png46 from "assets/static/emoji/ee_46.png";
import png47 from "assets/static/emoji/ee_47.png";
import png48 from "assets/static/emoji/ee_48.png";
import png49 from "assets/static/emoji/ee_49.png";
import png50 from "assets/static/emoji/ee_50.png";
import png51 from "assets/static/emoji/ee_51.png";
import png52 from "assets/static/emoji/ee_52.png";
import png53 from "assets/static/emoji/ee_53.png";
import png54 from "assets/static/emoji/ee_54.png";
import png55 from "assets/static/emoji/ee_55.png";
import png56 from "assets/static/emoji/ee_56.png";
import png57 from "assets/static/emoji/ee_57.png";
import png58 from "assets/static/emoji/ee_58.png";
import png59 from "assets/static/emoji/ee_59.png";
import png60 from "assets/static/emoji/ee_60.png";
import png61 from "assets/static/emoji/ee_61.png";
import png62 from "assets/static/emoji/ee_62.png";
import png63 from "assets/static/emoji/ee_63.png";
import png64 from "assets/static/emoji/ee_64.png";
import png65 from "assets/static/emoji/ee_65.png";
import png66 from "assets/static/emoji/ee_66.png";
import png67 from "assets/static/emoji/ee_67.png";
import png68 from "assets/static/emoji/ee_68.png";
import png69 from "assets/static/emoji/ee_69.png";
import png70 from "assets/static/emoji/ee_70.png";
import png71 from "assets/static/emoji/ee_71.png";
import png72 from "assets/static/emoji/ee_72.png";
import png73 from "assets/static/emoji/ee_73.png";
import png74 from "assets/static/emoji/ee_74.png";
import png75 from "assets/static/emoji/ee_75.png";
import png76 from "assets/static/emoji/ee_76.png";
import png77 from "assets/static/emoji/ee_77.png";
import png78 from "assets/static/emoji/ee_78.png";
import png79 from "assets/static/emoji/ee_79.png";
import png80 from "assets/static/emoji/ee_80.png";
import png81 from "assets/static/emoji/ee_81.png";
import png82 from "assets/static/emoji/ee_82.png";
import png83 from "assets/static/emoji/ee_83.png";
import png84 from "assets/static/emoji/ee_84.png";
import png85 from "assets/static/emoji/ee_85.png";
import png86 from "assets/static/emoji/ee_86.png";
import png87 from "assets/static/emoji/ee_87.png";
import png88 from "assets/static/emoji/ee_88.png";
import png89 from "assets/static/emoji/ee_89.png";
import png90 from "assets/static/emoji/ee_90.png";
import png91 from "assets/static/emoji/ee_91.png";
import png92 from "assets/static/emoji/ee_92.png";
import png93 from "assets/static/emoji/ee_93.png";
import png94 from "assets/static/emoji/ee_94.png";
import png95 from "assets/static/emoji/ee_95.png";
import png96 from "assets/static/emoji/ee_96.png";
import png97 from "assets/static/emoji/ee_97.png";
import png98 from "assets/static/emoji/ee_98.png";
import png99 from "assets/static/emoji/ee_99.png";
import png100 from "assets/static/emoji/ee_100.png";
import png101 from "assets/static/emoji/ee_101.png";
import png102 from "assets/static/emoji/ee_102.png";
import png103 from "assets/static/emoji/ee_103.png";
import png104 from "assets/static/emoji/ee_104.png";
import png105 from "assets/static/emoji/ee_105.png";
import png106 from "assets/static/emoji/ee_106.png";
import png107 from "assets/static/emoji/ee_107.png";
import png108 from "assets/static/emoji/ee_108.png";
import png109 from "assets/static/emoji/ee_109.png";
import png110 from "assets/static/emoji/ee_110.png";
import png111 from "assets/static/emoji/ee_111.png";
import png112 from "assets/static/emoji/ee_112.png";
import png113 from "assets/static/emoji/ee_113.png";
import png114 from "assets/static/emoji/ee_114.png";
import png115 from "assets/static/emoji/ee_115.png";
import png116 from "assets/static/emoji/ee_116.png";
import png117 from "assets/static/emoji/ee_117.png";
import png118 from "assets/static/emoji/ee_118.png";
import png119 from "assets/static/emoji/ee_119.png";
import png120 from "assets/static/emoji/ee_120.png";
import png121 from "assets/static/emoji/ee_121.png";
import png122 from "assets/static/emoji/ee_122.png";
import png123 from "assets/static/emoji/ee_123_cover.png";
import png124 from "assets/static/emoji/ee_124_cover.png";
import png125 from "assets/static/emoji/ee_125_cover.png";
import png126 from "assets/static/emoji/ee_126_cover.png";
import png127 from "assets/static/emoji/ee_127_cover.png";
import png128 from "assets/static/emoji/ee_128_cover.png";
import png129 from "assets/static/emoji/ee_129_cover.png";
import png130 from "assets/static/emoji/ee_130_cover.png";
import png131 from "assets/static/emoji/ee_131_cover.png";
import png132 from "assets/static/emoji/ee_132_cover.png";
import png133 from "assets/static/emoji/ee_133_cover.png";
import png134 from "assets/static/emoji/ee_134_cover.png";
import png135 from "assets/static/emoji/ee_135_cover.png";
import png136 from "assets/static/emoji/ee_136_cover.png";
import png137 from "assets/static/emoji/ee_137_cover.png";
import png138 from "assets/static/emoji/ee_138_cover.png";

import emojiService from "services/common/emoji";

let EMOJI_OBJ = emojiService.EMOJI_MAP
export default {
  name: "emojiNew",
  props:{
      imgStyle:{
          default(){
              return 30
          }
      }
  },
  data() {
    return {
      emojiArr: [
        png1,
        png2,
        png3,
        png4,
        png5,
        png6,
        png7,
        png8,
        png9,
        png10,
        png11,
        png12,
        png13,
        png14,
        png15,
        png16,
        png17,
        png18,
        png19,
        png20,
        png21,
        png22,
        png23,
        png24,
        png25,
        png26,
        png27,
        png28,
        png29,
        png30,
        png31,
        png32,
        png33,
        png34,
        png35,
        png36,
        png37,
        png38,
        png39,
        png40,
        png41,
        png42,
        png43,
        png44,
        png45,
        png46,
        png47,
        png48,
        png49,
        png50,
        png51,
        png52,
        png53,
        png54,
        png55,
        png56,
        png57,
        png58,
        png59,
        png60,
        png61,
        png62,
        png63,
        png64,
        png65,
        png66,
        png67,
        png68,
        png69,
        png70,
        png71,
        png72,
        png73,
        png74,
        png75,
        png76,
        png77,
        png78,
        png79,
        png80,
        png81,
        png82,
        png83,
        png84,
        png85,
        png86,
        png87,
        png88,
        png89,
        png90,
        png91,
        png92,
        png93,
        png94,
        png95,
        png96,
        png97,
        png98,
        png99,
        png100,
        png101,
        png102,
        png103,
        png104,
        png105,
        png106,
        png107,
        png108,
        png109,
        // png110,
        // png111,
        // png112,
        // png113,
        // png114,
        // png115,
        // png116,
        // png117,
        // png118,
        // png119,
        // png120,
        // png121,
        // png122,
        // png123,
        // png124,
        // png125,
        // png126,
        // png127,
        // png128,
        // png129,
        // png130,
        // png131,
        // png132,
        // png133,
        // png134,
        // png135,
        // png136,
        // png137,
        // png138
      ]
    };
  },
  methods: {
    imgSrc(params) {
      let value = null;
    //   value = EMOJI_OBJ.value
      for( let key in EMOJI_OBJ){
          if(params === EMOJI_OBJ[key] || params+'_cover' === EMOJI_OBJ[key]){
              value = key
          }
      }
      this.$emit("emojiDoc", value);
    }
  },
};
</script>
<style>
#emojiNew {
  background-color: #fff;
  overflow: auto;
  z-index: 9999;
  height: calc(100vh - 360px);
}
#emojiNew .emoji_body{
    overflow: hidden;
}
#emojiNew .emoji_body li {
  display: inline-block;
  width: inherit;
  padding: 0px 2px;
  line-height: normal;
  float: left;
}
#emojiNew .emoji_body li img{
    width: 30px;
    height: 30px;
}
#emojiNew .emoji_body li img.active{
    width: 100px;
    height: 100px;
}
</style>

